let str = location.search.replace('?', '');
let idStr = str.split('=')[1];
// 从localStorage中获取用户名
let username = localStorage.getItem('LOGIN_USER');

let oImg = $('.box');
let oInfo = $('.info');
let oTo = $('.total-price');
let oRight = $('.right-img');
const oAdd = $('.add-cart');
const oMy = $('.my-cart');

detail({
    id:idStr
}).then(res => {
    const { status, msg, data } = res;
   
   
    let toHTML = '';
    let imgHTML = '';
    let infoHTML = '';
    let rightHTML = '';
    // console.log(data[0]);
    const { goods_title, goods_price, goods_des, goods_img } = data[0];
    
    if (status) {
        imgHTML = `
            <div class="cover"></div>
            <img src="${goods_img}" alt="">
        `;
        rightHTML = `
            <img src="${goods_img}" alt="">
        `;
        infoHTML = `
            <h2>${goods_title}</h2>
            <p class="title">${goods_des}${goods_des}${goods_des}${goods_des}</p>
            <p class="prices">${goods_price}元</p>
        `;
        toHTML = `
            <li>${goods_title}</li>
            <p>总计${goods_price}元</p>
            `;
        
        oInfo.html(infoHTML);
        oImg.html(imgHTML);
        oTo.html(toHTML);
        oRight.html(rightHTML);
        new Magnifier('.img-show');
        
    } else {
        alert(msg);
    }
})

// 放大镜
function Magnifier(ele) { 
    this.oM = $(ele);
    this.oMiddle = this.oM.find('.box');
    this.oCover = this.oM.find('.cover');
    this.oLeft = this.oM.find('.left-img');
    this.oRight = this.oM.find('.right-img');

    //请求数据
    this.render();

    this.oLeftImg = this.oM.find('.box');
    this.oRightImg = this.oM.find('.right-img img');

    this.event();

    // 计算一些数据
    //自身距离的一半offsetWidth
    this.rX = this.oCover.outerWidth() / 2;
    this.rY = this.oCover.outerHeight() / 2;
    //左边图片最大距离为left的宽度(clientWidth)-自身宽度
    this.maxX = this.oMiddle.innerWidth() - this.oCover.outerWidth();
    this.maxY = this.oMiddle.innerHeight() - this.oCover.outerHeight();
    //右边图片最大距离=右边图片的宽度-右边盒子的宽度
    this.rightMaxX = this.oRightImg.innerWidth() - this.oRight.outerWidth();
    this.rightMaxY = this.oRightImg.innerHeight() - this.oRight.outerHeight();
    //把代码写活，不直接写比例，而是直接算出来，算出maxX和rightMaxX的比例
    this.radio = this.rightMaxX / this.maxX;

    // this.oLeftImg.attr('src' , smallPicData[0]);  
    // this.oRightImg.attr('src' ,bigPicData[0]);
}


Magnifier.prototype.render = function () { 
    
}

Magnifier.prototype.event = function () { 
    // 鼠标进入
    this.oMiddle.on('mouseover' , () => {
        this.oCover.css('opacity', 1);
        this.oRight.css('display', 'block');
    });
    // 鼠标移出
    this.oMiddle.on('mouseout', () => {
        this.oCover.css('opacity', 0);
        this.oRight.css('display', 'none');
    })
    // 鼠标在其中
    this.oMiddle.on('mousemove' , e => {
        e = e || event
        let target = e.target || e.srcElement;
        // 离目标源的距离（left）-自身距离的一半
        let x = e.offsetX - this.rX;
        let y = e.offsetY - this.rY;
        if(x < 0) x = 0;
        if(y < 0) y = 0;
        if(x > this.maxX) x = this.maxX;
        if(y > this.maxY) y = this.maxY;
        
        this.oCover.css({'left' : x , 'top' : y});
        
        //cover移动的同时right也要移动,并且是相反方向 加负号
        //不要忘记给img添加定位属性，否则left和top不能用
        this.oRightImg.css({'left' : -x * this.radio , 'top' : -y *this.radio});
        
    })
}


// 加入到购物车
oAdd.on('click', function () {  
    // 获取到商品id，商品num，用户名
    if (username) {
        add({
            id: idStr,
            username,
            num:1
        }).then(res => {
            const { msg } = res;
            alert(msg);
        })
    } else {
        // 去登录页面
        location.href = '../html/reg-login.html'
    }
    
})
oMy.on('click', function () {  
    // 跳转到我的购物车页面
    if (username) {
        // show({
        //     username
        // }).then(res => {
        //     const { status, msg, data } = res;
        //     if (status) {
        //         // 成功就跳转到购物车页面
        //         location.href = '../html/cart.html'
        //     } else {
        //         alert(msg);
        //     }
        // })
        location.href = '../html/cart.html';
    }else{
        location.href = '../html/reg-login.html'
    }

})